import { h } from 'preact';
import boardImage from '../assets/board.png';

const Welcome = () => {
  return (
    <div className="h-full overflow-hidden bg-gray-100">
      {/* 主要内容区域 */}
      <div className="h-full overflow-y-auto">
        <div className="container mx-auto px-6 py-6">
          <div className="flex justify-between items-center mb-8">
            <div className="relative">
              <div className="text-xs text-blue-500 font-medium mb-1 tracking-wide">Embedded real-time control system</div>
              <h1 className="flex items-center">
                <div className="w-1 h-6 bg-blue-500 mr-3"></div>
                <span className="text-2xl font-['Orbitron'] font-bold text-gray-800">HPM5E-EC-DEV</span>
                <span className="ml-2 text-lg font-normal text-gray-600">控制面板</span>
              </h1>
              <div className="mt-2 h-0.5 w-24 bg-blue-500"></div>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* 设备概览卡片 */}
            <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-lg font-semibold text-gray-800 flex items-center">
                  <svg className="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
                  </svg>
                  设备概览
                </h2>
              </div>
              
              <div className="relative aspect-video mb-4 overflow-hidden rounded-lg bg-gray-50">
                <img 
                  src={boardImage} 
                  alt="HPM5E-EC-DEV开发板" 
                  className="w-full h-full object-contain hover:scale-105 transition-transform duration-300"
                />
              </div>

              <p className="text-gray-600 text-sm leading-relaxed mb-4">
              基于先楫HPM5E31IPB1的Ethercat开发板，将Ethercat P0/P1和千兆以太网接口引出，板载LCD、DS18B20、蜂鸣器、USB OTG、串口、CAN等外设。
              </p>

              <div className="grid grid-cols-2 gap-4">
                <button className="flex items-center justify-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                  开始使用
                </button>
                <button className="flex items-center justify-center gap-2 bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 transition-colors">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                  </svg>
                  查看文档
                </button>
              </div>
            </div>

            {/* 功能特性卡片 */}
            <div className="grid grid-rows-2 gap-6">
              <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
                <h2 className="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                  <svg className="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                  核心特性
                </h2>
                <div className="grid grid-cols-2 gap-4">
                  {[
                    { name: '高性能', desc: '强大处理性能' },
                    { name: '丰富接口', desc: '多样外设支持' },
                    { name: '开源设计', desc: '自由定制开发' },
                    { name: '生态支持', desc: '完整技术方案' }
                  ].map((feature, index) => (
                    <div key={index} className="flex items-start space-x-3">
                      <div className="mt-1 p-1 rounded-md bg-blue-50 text-blue-600">
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                        </svg>
                      </div>
                      <div>
                        <div className="font-medium text-gray-800">{feature.name}</div>
                        <div className="text-sm text-gray-500">{feature.desc}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
                <h2 className="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                  <svg className="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                  </svg>
                  应用场景
                </h2>
                <div className="grid grid-cols-2 gap-4">
                  {[
                    '嵌入式开发',
                    '物联网应用',
                    '工业控制',
                    '创客教育'
                  ].map((scene, index) => (
                    <div key={index} className="flex items-center space-x-2">
                      <div className="w-2 h-2 rounded-full bg-blue-500"></div>
                      <span className="text-gray-600">{scene}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Welcome; 